@import "@/common/constants/StyleConst.scss";

.report {
  height: inherit;

  .head {
    line-height: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .title {
      font-size: 18px;
      font-weight: 700;
      margin-left: 4px;
      margin-right: 4px;
      color: $color-theme-grey;
    }

    .add-btn {
      min-width: unset;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #D9D9D9;

      .add-icon {
        color: #626C84;
      }
    }
  }

  .report-list {
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    height: calc(100% - 48px);
    overflow-y: auto;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
    border-radius: 8px;

    .report-problem-wrap,
    .sign-off-wrap {
      width: calc(50% - 4px);

      .report-item {
        &.active {
          outline: 2px solid $color-theme-orange;
          background-color: $color-bg-white;
        }

        &:first-child {
          align-items: center;
        }

        margin-top: 8px;
        align-items: start;
        height: 72px;
        display: flex;
        background-color: $color-theme-lightgrey;
        border-radius: 8px;
        box-shadow: unset;
        padding: 8px;

        .report-title {
          font-size: 18px;
          font-weight: 700;
          color: $color-theme-grey;
        }

        .head-portrait {
          font-size: 14px;
          font-weight: 700;
          color: $color-text-white;
          border-radius: 50%;
          background-color: #F8B254;
          align-self: center;
        }

        .report-item-content {
          padding-left: 10px;
          text-align: left;
          flex: 1;
          height: 100%;
          overflow-y: auto;

          .item-title,
          .item-subtitle {
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 400;
            color: $color-theme-grey;
          }
        }
      }
    }
  }
}